<template>
    <el-drawer
        v-model="isShow"
        :title="title"
        :destroy-on-close="true"
        size="50%"
        :close-on-press-escape="false"
        :close-on-click-modal="false"
        :show-close="false"
    >
        <el-form
            ref="queryFormRef"
            :model="queryForm"
            label-width="auto"
            label-position="top"
            :disabled="disableForm"
        >
            <el-row :gutter="24">
                <el-col :span="12">
                    <el-form-item label="报告开始日期" required prop="startdate" label-position="left"
                                  label-width="120">
                        <el-date-picker
                            v-model="queryForm.startdate"
                            type="datetime"
                            value-format="YYYY-MM-DD HH:mm:ss"
                            placeholder="选择日期"
                            style="width: 100%;"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="报告结束日期" required prop="enddate" label-position="left" label-width="120">
                        <el-date-picker
                            v-model="queryForm.enddate"
                            type="datetime"
                            value-format="YYYY-MM-DD HH:mm:ss"
                            placeholder="选择日期"
                            style="width: 100%;"
                        />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="警务基本信息" required prop="basicinfo">
                <el-input
                    type="textarea"
                    :autosize="{ minRows: 5, maxRows: 99 }"
                    v-model="queryForm.basicinfo"
                    :min="0"
                    :max="500"
                />
            </el-form-item>
            <el-form-item label="重要警务信息" required prop="importantinfo">
                <el-input
                    type="textarea"
                    :autosize="{ minRows: 5, maxRows: 99 }"
                    v-model="queryForm.importantinfo"
                    :min="0"
                    :max="500"
                />
            </el-form-item>
            <el-form-item label="日常工作信息(司法警察队伍、业务建设和日常管理情况)" required prop="dailyinfo">
                <el-input
                    type="textarea"
                    :autosize="{ minRows: 5, maxRows: 99 }"
                    v-model="queryForm.dailyinfo"
                    :min="0"
                    :max="500"
                />
            </el-form-item>
        </el-form>

        <template #footer>
            <!-- 创建 -->
            <!--            <el-button type="primary" @click="createPersonHandle(queryFormRef)" v-if="isAdd">提交</el-button>-->
            <!-- 更新 -->
            <!--                        <el-button type="primary" @click="updatePersonHandle" v-else>提交</el-button>-->
            <!--                        <el-button @click="changeShowStatus">关闭</el-button>-->
            <!--            <el-button type="primary" @click="saveHandle(1)" v-if="isAdd">保存</el-button>-->
            <!--            <el-button type="primary" @click="saveHandle(0)" v-else>保存</el-button>-->
            <!--            <el-button type="primary" @click="createHandle" v-if="isAdd">提交</el-button>-->
            <!--            <el-button type="primary" @click="updateHandle" v-else>提交</el-button>-->
            <el-button type="primary" @click="saveHandle" v-if="!isView">保存</el-button>
            <el-button type="primary" @click="createHandle" v-if="!isView">提交</el-button>
            <el-button @click="changeShowStatus">关闭</el-button>
        </template>

    </el-drawer>
</template>

<script setup>
import {
    addPoliceServiceWeekReport,
    getPoliceServiceWeekReportDetail,
    updatePoliceServiceWeekReport
} from "@/api/StatisticAnalysis/PoliceServiceWeekReport.js";

defineOptions({
    name: 'AddAndEditPoliceServiceWeekReport'
})

const emit = defineEmits(['refresh-list'])

// 是否是新增状态
const isAdd = ref(true)
// 是否禁用表单
const disableForm = ref(false)
// 是否展开
const isShow = ref(false)
const title = ref('新增警务动态报告')
const isView = ref(false)

const defaultQueryForm = {
    // 报告开始日期
    startdate: '',
    // 报告结束日期
    enddate: '',
    // 基本信息
    basicinfo: '',
    // 重要信息
    importantinfo: '',
    // 日常工作
    dailyinfo: '',
    state: '1'
}
const queryForm = ref({...defaultQueryForm});  // 初始化时用默认值

// 变更显示状态
const changeShowStatus = () => {
    isShow.value = !isShow.value
    if (!isShow.value) {
        resetQueryForm();  // 关闭时重置表单
    }
}

const resetQueryForm = () => {
    queryForm.value = {...defaultQueryForm};
    isAdd.value = true;
    disableForm.value = false;
    isView.value = false;
}

// 展开新增窗口
const showAddHandle = () => {
    changeShowStatus()
    title.value = '新增警务动态报告'
}

// 展开编辑窗口
const showEditHandle = (data) => {
    changeShowStatus()
    title.value = '编辑警务动态报告'
    isAdd.value = false
    getDetail(data)
}

// 展开详情窗口
const showDetailHandle = (data) => {
    changeShowStatus()
    title.value = '警务动态报告';
    disableForm.value = true;
    isView.value = true;
    getDetail(data)
}

defineExpose({showAddHandle, showEditHandle, showDetailHandle})

// 保存新的动态·状态未发布
const saveHandle = async () => {
    queryForm.value.state = '0';

    if (isAdd.value) {
        await addPoliceServiceWeekReport(queryForm.value)
            .then(() => {
                changeShowStatus()
                emit('refresh-list')
            })
    } else {
        await updatePoliceServiceWeekReport(queryForm.value)
            .then(() => {
                changeShowStatus()
                emit('refresh-list')
            })
    }

}

// 创建新的动态
const createHandle = async () => {
    queryForm.value.state = '1';
    console.log(queryForm.value)
    if (isAdd.value) {
        await addPoliceServiceWeekReport(queryForm.value)
            .then(() => {
                changeShowStatus()
                emit('refresh-list')
            })
    } else {
        await updateHandle()
    }
}

// 保存新动态内容
const updateHandle = async () => {
    await updatePoliceServiceWeekReport(queryForm.value)
        .then(() => {
            changeShowStatus()
            emit('refresh-list')
        })
}

// 获取动态详情
const getDetail = async (data) => {
    const res = await getPoliceServiceWeekReportDetail(data.jwPolicereportId)
    queryForm.value = {...queryForm.value, ...res.data}
}
</script>

<style scoped lang="scss">

</style>